<div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>
                        <vc:i18n name="按月缴费" namespace="payFeeMonthOrder"></vc:i18n>
                    </h5>
                    <div class="ibox-tools" style="top:10px;">
                        <button type="button" class="btn btn-primary btn-sm" style="margin-left:10px"
                            v-on:click="vc.goBack()">
                            <vc:i18n name="返回"></vc:i18n>
                        </button>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-3">
                            <div class="form-group">
                                <label class="col-form-label">
                                    收费对象：{{payFeeMonthOrderInfo.payerObjName}}
                                </label>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label class="col-form-label">
                                    业主：{{payFeeMonthOrderInfo.name}}
                                </label>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label class="col-form-label">
                                    手机号：{{payFeeMonthOrderInfo.link}}
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-if="payFeeMonthOrderInfo.payerObjType == '3333'">
                        <div class="col-3">
                            <div class="form-group">
                                <label class="col-form-label">
                                    建筑面积：{{payFeeMonthOrderInfo.builtUpArea}}
                                </label>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label class="col-form-label">
                                    室内面积：{{payFeeMonthOrderInfo.roomArea}}
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-if="payFeeMonthOrderInfo.payerObjType == '6666'">
                        <div class="col-3">
                            <div class="form-group">
                                <label class="col-form-label">
                                    停车场：{{payFeeMonthOrderInfo.paNum}}
                                </label>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label class="col-form-label">
                                    停车位：{{payFeeMonthOrderInfo.psNum}}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5><vc:i18n name="应缴费用" namespace="payFeeMonthOrder"></vc:i18n></h5>
                    <div class="ibox-tools flex justify-end" style="top:5px;">

                        <div class="">
                            <input v-model="payFeeMonthOrderInfo.payMonthDate" type="text"
                                :placeholder="vc.i18n('请选择缴费年月','payFeeMonthOrder')"
                                class="form-control payMonthDate">
                        </div>
                        <div class="margin-left-sm margin-top-xs">
                            <button class="btn btn-white" @click="_queryMonthFeeAll()">全部</button>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <table id="batchTable" class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                        <thead>
                            <tr>
                                <th class="text-center"><input type="checkbox" class="i-checks all-check" @click="checkAll($event)"></th>
                                <th class="text-center">
                                    <vc:i18n name="费用项目" namespace="payFeeMonthOrder"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="费用标识" namespace="payFeeMonthOrder"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="费用类型" namespace="payFeeMonthOrder"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="收费年月" namespace="payFeeMonthOrder"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="应收金额" namespace="payFeeMonthOrder"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="说明" namespace="payFeeMonthOrder"></vc:i18n>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="fee in payFeeMonthOrderInfo.monthFees">
                                <td class="text-center">
                                    <input type="checkbox" class="i-checks checkItem" v-bind:value="fee.monthId" v-model="payFeeMonthOrderInfo.selectMonthIds">
                                </td>
                                <td class="text-center hand">
                                    {{fee.feeName}}
                                </td>
                                <td class="text-center">{{fee.feeFlagName}}</td>
                                <td class="text-center">{{fee.feeTypeCdName}}</td>
                                <td class="text-center">{{fee.detailYear}}-{{fee.detailMonth}}</td>
                                <td class="text-center">{{fee.receivableAmount}}</td>
                                <td class="text-center" v-if="fee.computingFormula == '5005' || fee.computingFormula == '9009'">
                                    <div>
                                        <span>
                                            <vc:i18n name="上期度数：" namespace="simplifyRoomFee"></vc:i18n>
                                        </span>{{fee.preDegrees}}
                                    </div>
                                    <div>
                                        <span>
                                            <vc:i18n name="本期度数：" namespace="simplifyRoomFee"></vc:i18n>
                                        </span>{{fee.curDegrees}}
                                    </div>
                                    <div>
                                        <span>
                                            <vc:i18n name="单价：" namespace="simplifyRoomFee"></vc:i18n>
                                        </span>{{getOnePrice1(fee)}}
                                    </div>
                                    <div>
                                        <span>
                                            <vc:i18n name="附加费：" namespace="simplifyRoomFee"></vc:i18n>
                                        </span>{{fee.additionalAmount}}
                                    </div>
                                </td>
                                <td class="text-center" v-else-if="fee.computingFormula == '6006'">
                                    <div>
                                        <span>
                                            <vc:i18n name="用量：" namespace="simplifyRoomFee"></vc:i18n>
                                        </span>{{_getAttrValue(fee.feeAttrs,'390006')}}
                                    </div>
                                    <div>
                                        <span>
                                            <vc:i18n name="单价：" namespace="simplifyRoomFee"></vc:i18n>
                                        </span>{{fee.squarePrice}}
                                    </div>
                                    <div>
                                        <span>
                                            <vc:i18n name="附加费：" namespace="simplifyRoomFee"></vc:i18n>
                                        </span>{{fee.additionalAmount}}
                                    </div>
                                </td>
                                <td class="text-center" width="150" v-else-if="fee.feeTypeCd == '888800010017'" >
                                    <div>
                                        <span>
                                            <vc:i18n name="算法：" namespace="simplifyRoomFee"></vc:i18n>
                                        </span>{{_getAttrValue(fee.feeAttrs,'390005')}}
                                    </div>
                                    <div>
                                        <span>
                                            <vc:i18n name="用量：" namespace="simplifyRoomFee"></vc:i18n>
                                        </span>{{_getAttrValue(fee.feeAttrs,'390003')}}
                                    </div>
                                </td>
                                <td class="text-center" v-else>
                                    <div>
                                        <span>
                                            <vc:i18n name="单价：" namespace="simplifyRoomFee"></vc:i18n>
                                        </span>{{fee.squarePrice}}
                                    </div>
                                    <div v-if="fee.feeFlag == '1003006'">
                                        <span>
                                            <vc:i18n name="附加费：" namespace="simplifyRoomFee"></vc:i18n>
                                        </span>{{fee.additionalAmount}}
                                    </div>
                                    <div v-else>
                                        <span>
                                            <vc:i18n name="固定费：" namespace="simplifyRoomFee"></vc:i18n>
                                        </span>{{fee.additionalAmount}}
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="8">
                                    <ul class="pagination float-right"></ul>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8"></div>
        <div class="col-md-2">
            缴费金额：<span style="font-size: 30px; color: red; padding-left: 0px;">{{payFeeMonthOrderInfo.totalAmount}}<span><vc:i18n name="元" namespace="payFeeMonthOrder"></vc:i18n></span></span>
        </div>
        <div class="col-md-1 " style="margin-bottom:10px; text-align:right">
            <!-- <button type="button" class="btn btn-success btn-lg btn-block" @click="_openPayFee('qrCode')">
                        <vc:i18n name="扫码收费" namespace="payFeeMonthOrder"></vc:i18n>
            </button> -->
        </div>
        <div class="col-md-1 " style="margin-bottom:10px; text-align:right">
            <button type="button" class="btn  btn-primary  btn-lg btn-block" style="margin-left:10px;" v-on:click="_payFee()"><span><vc:i18n name="缴费" namespace="payFeeMonthOrder"></vc:i18n></span>
            </button>
        </div>
    </div>

    <vc:create path="fee/payFeeMonthOrderResult"></vc:create>
</div>